<template>
  <div class="text_group">
    <div class="input_group" :class="{'is-invalid': error}">
      <!-- 输入框 -->
      <input 
        class="input"
        :type="type"
        :placeholder="placeholder"
        :value="value"
        :name="name"
        @input="$emit('input',$event.target.value)"
      />
      <!-- 输入框后面的内容 -->
      <button
        v-if="btnTitle"
        @click="$emit('btnClick')"
        class="btnss"
        :disabled="disabled"
      >{{btnTitle}}</button>
    </div>
    <!-- 验证提示 -->
    <div v-if="error" class="invalid-feedback">{{error}}</div>
  </div>
</template>
<script>
export default {
  name: "inputGroup",
  props: {
    type: {
      type: String,
      default: "text"
    },
    placeholder: String,
    value: String,
    name: String,
    disabled: Boolean,
    btnTitle: String, //input框中的文字
    error: String //验证不正确提示
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .input {
      width: 200px;
      
      border: 1px solid rgba(255, 255, 255, 0.1);
      // background: rgba(0, 0, 0, 0.1);
      color: #454545;
      // background: white;
      // -webkit-appearance: none;
      // border-radius: 0px;
      padding: 12px 5px 12px 15px;
      
      // color: #333;
      height: 47px;
      caret-color: #333;
      
  }
.btnss {
  color: rgb(38, 180, 236);
  border: none;
  float: right;
  height: 47px;
  padding: 12px 10px 12px 15px
}
.input_group{
  width: 350px;
  border: 1px solid #C9D4E8;
  border-radius: 5px;
  overflow: hidden;
  margin-left: 10%;
  margin-bottom: 22px;

}

.invalid-feedback{
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    // position: absolute;
    // top: 100%;
    // left: 0;
    margin: -20px 10px -16px 10%;

}
input:focus {
  outline:none;
  border: 0px ;
}
</style>
